<template>
  <div class="block-wrap">
    <div class="block" v-loading="loading">
      <el-form label-width="140px;">
        <el-form-item
          :label="$t('notice.operatingTableNotice')"
        >
          <div>
            <el-switch
                v-model="setting[OPERATING_TABLE_NOTICE_SWITCH]"
                @change="saveSingleSetting(OPERATING_TABLE_NOTICE_SWITCH, $event)"
            ></el-switch>
          </div>
          <div class="subForm">
            <div class="label">{{ $t('notice.sendFrequency') }}</div>
            <div class="data">
              <div>
                <el-radio-group v-model="setting[OPERATING_TABLE_REMIND_FREQUENCY]">
                  <el-radio label="daily">{{ $t('notice.daily') }}</el-radio>
                  <el-radio label="weekly">{{ $t('notice.weekly') }}</el-radio>
                </el-radio-group>
              </div>
              <div class="tips">{{ $t('notice.operatingTableTips1') }}</div>
            </div>
          </div>
        </el-form-item>
        <el-form-item
            :label="$t('notice.stockWarningNotice')"
        >
          <div>
            <el-switch
                v-model="setting[STOCK_WARNING_SWITCH]"
                @change="saveSingleSetting(STOCK_WARNING_SWITCH, $event)"
            ></el-switch>
          </div>
          <div class="subForm">
            <div class="label">{{ $t('notice.sendType') }}</div>
            <div class="data">
              <div>
                <el-radio-group v-model="setting[STOCK_WARNING_SEND_TYPE]">
                  <el-radio :label="1">{{ $t('notice.sendSingle') }}</el-radio>
                  <el-radio :label="2">{{ $t('notice.sendFollow') }}</el-radio>
                </el-radio-group>
              </div>
              <div class="tips">
                <div>{{ $t('notice.stockWarningTips1')}}</div>
                <div>{{ $t('notice.stockWarningTips2') }}</div>
              </div>
            </div>
          </div>
        </el-form-item>
      </el-form>
    </div>
    <div class="buttons">
      <el-button size="small" @click="saveSetting()" type="primary">{{ $t('notice.save') }}</el-button>
    </div>
  </div>
</template>

<script>


import {getUserSetting, saveUserSetting} from "@/api/businessSetting";

const OPERATING_TABLE_NOTICE_SWITCH = 'operating_table_notice_switch';
const OPERATING_TABLE_REMIND_FREQUENCY = 'operating_table_remind_frequency';
const STOCK_WARNING_SWITCH = 'stock_warning_switch';
const STOCK_WARNING_SEND_TYPE = 'stock_warning_send_type';

export default {
  data() {
    return {
      OPERATING_TABLE_NOTICE_SWITCH,
      OPERATING_TABLE_REMIND_FREQUENCY,
      STOCK_WARNING_SWITCH,
      STOCK_WARNING_SEND_TYPE,
      setting: {
        [OPERATING_TABLE_NOTICE_SWITCH]: false,
        [OPERATING_TABLE_REMIND_FREQUENCY]: 0,
        [STOCK_WARNING_SWITCH]: false,
        [STOCK_WARNING_SEND_TYPE]: 0,
      },
      loading: false,
    }
  },
  created() {
    this.getSetting();
  },
  methods: {
    getSetting() {
      const params = {
        names: Object.keys(this.setting).join(','),
      };
      this.loading = true;
      getUserSetting(params)
          .then(res => {
            this.setting = res.data.configs;
            this.loading = false;
          })
    },
    saveSetting() {
      const data = {
        configs: this.setting,
      };
      this.loading = true;
      saveUserSetting(data)
          .then(res => {
            this.loading = false;
            if (res.error === 0) {
              this.$message.success(this.$t('common.保存成功'));
            } else {
              this.$message.error(res.message);
            }
            this.$store.dispatch('user/getInfo');
          })
    },
    saveSingleSetting(name, value) {
      const data = {
        configs: {
          [name]: value,
        },
      };
      this.loading = true;
      saveUserSetting(data)
          .then(res => {
            this.loading = false;
            if (res.error === 0) {
              this.$message.success(this.$t('common.保存成功'));
            } else {
              this.$message.error(res.message);
            }
            this.$store.dispatch('user/getInfo');
          })
    },
  }
}
</script>

<style scoped lang="less">
@import "../style/notice-global";
.subForm{
  display: flex;
  padding: 12px 0;
  .label{
    width: 140px;
    text-align: right;
    padding-right: 20px;
    line-height: 32px;
  }
  .tips{
    color: #929292;
    line-height: 18px;
  }
}
.buttons{
  padding: 16px 0 0;
}
</style>
